<template>
  <view
    class="bg-gradient-to-r from-blue-50 to-blue-100 min-h-screen w-[750rpx] box-border"
  >
    <view class="px-[32rpx] py-[64rpx]">
      <!-- Header -->
      <view class="text-center mb-[80rpx]">
        <!-- 返回按钮 -->
        <view
          class="absolute top-[30rpx] left-[30rpx] z-20 w-[60rpx] h-[60rpx] flex items-center justify-center cursor-pointer"
          @click="goBack"
        >
          <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            name="left"
            size="20"
            color="#ffffff"
          />
        </view>
        <view
          class="w-[160rpx] h-[160rpx] bg-gradient-to-r from-blue-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-[32rpx] shadow-lg"
        >
          <IconFont name="user-plus" class="text-white text-[60rpx]" />
        </view>
        <text class="text-[48rpx] font-bold text-blue-900 mb-[16rpx] block"
          >成为平台从业者</text
        >
        <text class="text-blue-700 text-[28rpx]"
          >开启个人创业之旅，共享平台资源与机遇</text
        >
      </view>

      <!-- Rules Cards -->
      <view class="flex flex-wrap gap-[30rpx] mb-[40rpx]">
        <view
          class="flex-1 min-w-[300rpx] bg-white rounded-[20rpx] p-[35rpx] shadow-lg"
        >
          <view
            class="text-[32rpx] font-semibold mb-[25rpx] text-blue-500 flex items-center"
          >
            <IconFont name="id-card" class="mr-[15rpx] text-[32rpx]" />
            <text>实名认证规则</text>
          </view>
          <view class="text-[26rpx] leading-[1.8]">
            <view class="mb-[15rpx] pl-[10rpx] relative">
              <text class="text-blue-500 font-bold absolute left-0">•</text>
              <text class="ml-[20rpx]">每个身份证号码仅限认证一个平台账号</text>
            </view>
            <view class="mb-[15rpx] pl-[10rpx] relative">
              <text class="text-blue-500 font-bold absolute left-0">•</text>
              <text class="ml-[20rpx]">请确保提交的身份证信息真实有效</text>
            </view>
            <view class="mb-[15rpx] pl-[10rpx] relative">
              <text class="text-blue-500 font-bold absolute left-0">•</text>
              <text class="ml-[20rpx]">认证信息将用于平台交易安全保障</text>
            </view>
            <view class="mb-[15rpx] pl-[10rpx] relative">
              <text class="text-blue-500 font-bold absolute left-0">•</text>
              <text class="ml-[20rpx]">实名认证通过后方可开始接单</text>
            </view>
            <view
              class="mb-[15rpx] pl-[10rpx] relative text-red-500 font-medium"
            >
              <text class="text-red-500 font-bold absolute left-0">•</text>
              <text class="ml-[20rpx]">虚假认证将导致账号永久封禁</text>
            </view>
          </view>
        </view>

        <view
          class="flex-1 min-w-[300rpx] bg-white rounded-[20rpx] p-[35rpx] shadow-lg"
        >
          <view
            class="text-[32rpx] font-semibold mb-[25rpx] text-blue-500 flex items-center"
          >
            <IconFont
              name="exclamation-triangle"
              class="mr-[15rpx] text-[32rpx]"
            />
            <text>处罚规则</text>
          </view>
          <view class="text-[26rpx] leading-[1.8]">
            <view class="mb-[15rpx] pl-[10rpx] relative">
              <text class="text-blue-500 font-bold absolute left-0">•</text>
              <text class="ml-[20rpx]"
                ><text class="font-bold">第一次违规：</text>平台警告通知</text
              >
            </view>
            <view class="mb-[15rpx] pl-[10rpx] relative">
              <text class="text-blue-500 font-bold absolute left-0">•</text>
              <text class="ml-[20rpx]"
                ><text class="font-bold">第二次违规：</text>账号冻结7天</text
              >
            </view>
            <view class="mb-[15rpx] pl-[10rpx] relative">
              <text class="text-blue-500 font-bold absolute left-0">•</text>
              <text class="ml-[20rpx]"
                ><text class="font-bold">第三次违规：</text>账号永久封禁</text
              >
            </view>
            <view
              class="mb-[15rpx] pl-[10rpx] relative text-red-500 font-medium"
            >
              <text class="text-red-500 font-bold absolute left-0">•</text>
              <text class="ml-[20rpx]">账号封禁后选择删除账号：</text>
            </view>
            <view class="mb-[15rpx] pl-[10rpx] relative">
              <text class="text-blue-500 font-bold absolute left-0">•</text>
              <text class="ml-[20rpx]">系统记录该身份证信息</text>
            </view>
            <view class="mb-[15rpx] pl-[10rpx] relative">
              <text class="text-blue-500 font-bold absolute left-0">•</text>
              <text class="ml-[20rpx]">一年内禁止使用同一身份证注册</text>
            </view>
            <view class="mb-[15rpx] pl-[10rpx] relative">
              <text class="text-blue-500 font-bold absolute left-0">•</text>
              <text class="ml-[20rpx]">一年内禁止在平台接单</text>
            </view>
          </view>
        </view>
      </view>

      <!-- Form Section -->
      <view class="bg-white rounded-xl mb-[64rpx] overflow-hidden">
        <view
          class="h-[8rpx] bg-gradient-to-r from-blue-500 to-blue-600"
        ></view>

        <view class="p-[48rpx]">
          <view
            class="text-[36rpx] font-semibold text-blue-900 mb-[48rpx] flex items-center"
          >
            <IconFont
              name="user-tie"
              class="text-blue-500 mr-[16rpx] text-[36rpx]"
            />
            <text>个人信息</text>
          </view>

          <nut-form ref="formRef" class="nfome" :model="formData">
            <!-- 真实姓名 -->
            <view class="mb-[48rpx]">
              <text
                class="block text-[28rpx] font-medium text-blue-800 mb-[16rpx]"
              >
                真实姓名 <text class="text-red-500">*</text>
              </text>
              <input
                v-model="formData.realName"
                type="text"
                class="w-full box-border px-[25rpx] py-[25rpx] border-2 border-blue-200 rounded-lg text-[26rpx] bg-blue-50"
                placeholder="请输入与身份证一致的姓名"
              />
            </view>

            <!-- 身份证号码 -->
            <view class="mb-[48rpx]">
              <text
                class="block text-[28rpx] font-medium text-blue-800 mb-[16rpx]"
              >
                身份证号码 <text class="text-red-500">*</text>
              </text>
              <input
                v-model="formData.idNumber"
                type="text"
                class="w-full box-border px-[25rpx] py-[25rpx] border-2 border-blue-200 rounded-lg text-[26rpx] bg-blue-50"
                placeholder="请输入18位身份证号码"
              />
            </view>

            <!-- 上传身份证 -->
            <view class="mb-[48rpx]">
              <text
                class="block text-[28rpx] font-medium text-blue-800 mb-[16rpx]"
              >
                上传身份证 <text class="text-red-500">*</text>
              </text>
              <view
                class="border-2 border-dashed border-blue-200 rounded-[15rpx] p-[40rpx] text-center bg-blue-50 cursor-pointer"
                @click="uploadIdCard"
              >
                <IconFont
                  name="id-card"
                  class="text-blue-500 text-[50rpx] mb-[20rpx]"
                />
                <text class="text-[26rpx] text-blue-600 block"
                  >点击上传身份证正反面</text
                >
                <text class="text-[22rpx] text-blue-400 mt-[15rpx] block"
                  >请确保身份证信息清晰可见，支持 JPG/PNG 格式</text
                >
              </view>
            </view>

            <!-- 选择行业 -->
            <view class="mb-[48rpx]">
              <text
                class="block text-[28rpx] font-medium text-blue-800 mb-[16rpx]"
              >
                选择行业 <text class="text-red-500">*</text>
              </text>
              <!-- 自定义触发区域 -->
              <view
                class="w-full box-border px-[25rpx] py-[25rpx] border-2 border-blue-200 rounded-lg text-[26rpx] bg-blue-50"
                @click="showIndustryPicker = true"
              >
                {{ getIndustryText(formData.industry) || "请选择您从事的行业" }}
              </view>
              <!-- nut-popup 包裹 nut-picker -->
              <nut-popup
                v-model:visible="showIndustryPicker"
                position="bottom"
                round
              >
                <nut-picker
                  v-model="industryValue"
                  :columns="industryOptions"
                  title="选择行业"
                  @confirm="onIndustryConfirm"
                />
              </nut-popup>
            </view>

            <!-- 服务范围 -->
            <view class="mb-[48rpx]">
              <text
                class="block text-[28rpx] font-medium text-blue-800 mb-[16rpx]"
              >
                服务范围 <text class="text-red-500">*</text>
              </text>
              <textarea
                v-model="formData.serviceScope"
                class="w-full box-border px-[25rpx] py-[25rpx] border-2 border-blue-200 rounded-lg text-[26rpx] bg-blue-50 min-h-[180rpx]"
                placeholder="请详细描述您提供的服务内容、专业技能及服务范围"
              />
            </view>

            <!-- 上传资质证明 -->
            <view class="mb-[48rpx]">
              <text
                class="block text-[28rpx] font-medium text-blue-800 mb-[16rpx]"
              >
                上传资质证明 <text class="text-red-500">*</text>
              </text>
              <view
                class="border-2 border-dashed border-blue-200 rounded-[15rpx] p-[40rpx] text-center bg-blue-50 cursor-pointer"
                @click="uploadCertificate"
              >
                <IconFont
                  name="award"
                  class="text-blue-500 text-[50rpx] mb-[20rpx]"
                />
                <text class="text-[26rpx] text-blue-600 block"
                  >点击上传相关资质证明</text
                >
                <text class="text-[22rpx] text-blue-400 mt-[15rpx] block"
                  >如职业证书、作品集、学历证明等（可选）</text
                >
              </view>
            </view>

            <!-- 押金说明 -->
            <view
              class="bg-blue-50 border-l-4 border-blue-500 p-[30rpx] rounded-r-lg mb-[48rpx]"
            >
              <view
                class="text-[28rpx] font-semibold mb-[15rpx] text-blue-500 flex items-center"
              >
                <IconFont name="shield-alt" class="mr-[10rpx]" />
                <text>押金规则说明</text>
              </view>
              <view class="text-[24rpx] text-blue-700">
                <text class="block mb-[10rpx]"
                  >为确保服务质量，您需要缴纳平台保证金：<text
                    class="text-red-500 font-bold text-[32rpx]"
                    >¥2,000</text
                  ></text
                >
                <text class="block mb-[10rpx]"
                  >审核不通过时，押金将在3-5个工作日内原路退回</text
                >
                <text class="block"
                  >合作期间如无违规行为，保证金在退出平台时全额退还</text
                >
              </view>
            </view>

            <!-- 协议 -->
            <view class="mb-[48rpx]">
              <label class="flex items-center">
                <checkbox v-model="formData.agreeTerms" class="mr-[10rpx]" />
                <text class="text-[26rpx]">
                  我已阅读并同意
                  <text class="text-blue-500">《平台服务协议》</text>
                  和
                  <text class="text-blue-500">《隐私政策》</text>
                </text>
              </label>
            </view>

            <!-- 提交按钮 -->
            <nut-button
              type="primary"
              block
              size="large"
              class="h-[96rpx] text-[32rpx] bg-gradient-to-r from-blue-500 to-blue-600"
              @click="handleSubmit"
            >
              提交审核申请
            </nut-button>
          </nut-form>
        </view>
      </view>

      <!-- Footer -->
      <view class="text-center text-blue-600 text-[24rpx]">
        <text class="block"
          >© 2023 自由职业者平台 | 让个人价值得到更好实现</text
        >
        <view class="flex justify-center gap-[30rpx] mt-[20rpx]">
          <text class="text-blue-500">平台规则</text>
          <text class="text-blue-500">常见问题</text>
          <text class="text-blue-500">联系客服</text>
          <text class="text-blue-500">隐私政策</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";

// 表单数据
const formData = reactive({
  realName: "",
  idNumber: "",
  industry: "consulting",
  serviceScope: "",
  agreeTerms: false,
});

// 行业选项
const industryOptions = ref([
  { text: "互联网", value: "it" },
  { text: "制造业", value: "manufacture" },
  { text: "咨询顾问", value: "consulting" },
  { text: "教育培训", value: "education" },
  { text: "市场营销", value: "marketing" },
  { text: "文案写作", value: "writing" },
  { text: "新媒体运营", value: "media" },
  { text: "其他自由职业", value: "other" },
]);
const industryValue = ref<string[]>([""]); // 必须是数组
const showIndustryPicker = ref(false);

// 表单引用
const formRef = ref();

// 上传身份证
const uploadIdCard = () => {
  Taro.showToast({
    title: "身份证上传成功",
    icon: "success",
  });
};

// 上传资质证明
const uploadCertificate = () => {
  Taro.showToast({
    title: "资质证明上传成功",
    icon: "success",
  });
};

// 提交表单
const handleSubmit = () => {
  // 表单验证
  if (!formData.realName) {
    Taro.showToast({
      title: "请输入真实姓名",
      icon: "none",
    });
    return;
  }

  if (!formData.idNumber || formData.idNumber.length !== 18) {
    Taro.showToast({
      title: "请输入有效的18位身份证号码",
      icon: "none",
    });
    return;
  }

  if (!formData.industry) {
    Taro.showToast({
      title: "请选择所属行业",
      icon: "none",
    });
    return;
  }

  if (!formData.serviceScope) {
    Taro.showToast({
      title: "请填写服务范围",
      icon: "none",
    });
    return;
  }

  if (!formData.agreeTerms) {
    Taro.showToast({
      title: "请阅读并同意平台协议",
      icon: "none",
    });
    return;
  }

  // 提交成功
  Taro.showToast({
    title: "申请提交成功！我们将在1-3个工作日内完成审核，请留意平台通知。",
    icon: "success",
    duration: 3000,
  });
};

// 选择行业 picker 引用
function onIndustryConfirm() {
  showIndustryPicker.value = false;
  formData.industry = industryValue.value[0];
}

function getIndustryText(val: string): string {
  const found = industryOptions.value.find((item) => item.value === val);
  return found ? found.text : "";
}

// 返回上一页
const goBack = () => {
  Taro.navigateBack({
    delta: 1,
  });
};
</script>

<style lang="scss" scoped>
.nfome {
  :deep(.nut-cell-group__wrap) {
    box-shadow: none !important;
  }
}
</style>
